<template>
  <div class="inputline">
    <input class="input" v-model="input" :type="type" :placeholder="placeholder">
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String
    },
    placeholder: {
      type: String
    },
    type: {
      type: String,
      default: 'text'
    }
  },
  data () {
    return {
      input: ''
    }
  },
  mounted () {
    this.input = this.value
  },
  watch: {
    value (val) {
      this.input = val
    },
    input (val) {
      this.$emit('input', val)
    }
  }
}
</script>


<style lang="less" scoped>
  .input{
    height: 20px;
    background-color: transparent;
    border: 3px solid #fff;
    box-shadow: none;
    outline: none;
    color: #fff;
    padding: 5px;
    font-size: 18px;
    font-family: myFont;
  }
</style>

